<template>
    <div>
        <van-sticky>
            <!-- 搜索框 -->
            <form action="/">
                <van-search v-model="text" @search="onSearch" @focus="onFocus" placeholder="请输入搜索关键词" />
            </form>

            <!-- 搜索列表 -->
            <div v-if="isShow" class="searchList">
                <ul>

                    <li @click="toGoodsList" v-for="item, index in searchList" :key="index">
                        <span>{{ item }}</span>
                        <span>></span>
                    </li>

                </ul>
            </div>

            <!-- tab栏 -->
            <div v-else class="tab">
                <div @click="check1" style="margin-top: 2px;" :class="flag === 1 ? 'active' : ''">综合</div>
                <div @click="check2" class="price">
                    <div style="margin-top: 2px;" :class="flag === 2 ? 'active' : ''">价格</div>
                    <div class="icon">
                        <van-icon size="2px" color="rgb(221, 221, 221)" name="arrow-up" />
                        <van-icon size="2px" color="rgb(221, 221, 221)" name="arrow-down" />
                    </div>
                </div>
                <div @click="check3" style="margin-top: 2px;" :class="flag === 3 ? 'active' : ''">分类</div>
            </div>
        </van-sticky>
        <!-- 商品列表 -->
        <div v-if="!isShow" class="goodsList" style="padding-top: 12px;border-top: 1px solid rgb(207, 207, 207);">
            <div v-for="item in goodsList" :key="item.id" class="goodsItem">
                <img v-mylazy="item.listPicUrl" alt="">

                <p><img v-if="item.preLogo[0]" :src="item.preLogo[0]?.logoUrl" alt=""><span>{{ item.name }}</span></p>
                <h3><span style="color: red;">￥</span>{{ item.retailPrice }}<span style=" text-decoration:line-through">￥{{
                    item.sortOriginPrice }}</span></h3>
                <div class="bottomTips" v-if="item.finalPriceInfoVO.banner"
                    :style="{ backgroundColor: (item.finalPriceInfoVO.banner?.content && !item.finalPriceInfoVO.banner?.title) ? 'white' : 'rgb(255, 221, 221)' }">

                    <span v-if="item.finalPriceInfoVO.banner?.title || item.finalPriceInfoVO.banner?.content"
                        class="title">{{ item.finalPriceInfoVO.banner?.title || item.finalPriceInfoVO.banner?.content
                        }}</span>
                    <span v-if="item.finalPriceInfoVO.banner?.content && item.finalPriceInfoVO.banner?.title"
                        class="content">{{
                            item.finalPriceInfoVO.banner?.content }}</span>

                </div>
            </div>
            <div class="goodsItem"></div>

            <div class="goodsItem"></div>

        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from "vue"
import { ReqGoodsList } from '@/api/goods'
import { ReqSearchInput } from '@/api/search';

export default defineComponent({
    name: '',
})
</script>

<script lang="ts" setup>
import { debounce } from 'lodash';
import { useRoute, useRouter } from 'vue-router'
const text = ref<any>('');
const isShow = ref<any>(false);
const flag = ref<any>(1);
const goodsList = ref<any>([]);
const searchList = ref<any>([]);



const { query: { keyword } } = useRoute()
const router = useRouter()
defineExpose({ text })

watch(text, debounce(async () => {
    // console.log(text.value);
    if (!text.value) {
        router.push('/search')
    } else {
        let { data } = await ReqSearchInput(text.value)
        searchList.value = data
    }
}, 300
))

//tab栏改变颜色
const check1 = () => {
    flag.value = 1
}
const check2 = () => {
    flag.value = 2
}
const check3 = () => {
    flag.value = 3
}


onMounted(() => {
    getGoodsList()
})

const onFocus = () => {
    isShow.value = true

}

const onSearch = async () => {
    let { data } = await ReqGoodsList(text.value as string)

    goodsList.value = data.directlyList
    isShow.value = false

}

const getGoodsList = async () => {
    text.value = keyword
    let { data } = await ReqGoodsList(text.value as string)
    console.log(data.directlyList);
    goodsList.value = data.directlyList

}

const toGoodsList = async (e: any) => {
    let word = e.target.childNodes[0].nodeValue || e.target.childNodes[0].innerText
    text.value = word
    isShow.value = false
    let { data } = await ReqGoodsList(text.value as string)
    goodsList.value = data.directlyList


}

</script>

<style scoped lang="scss">
.active {
    color: red;
}

.searchList {
    background-color: white;
    margin-top: 1px;
    padding: 12px;

    ul li {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgb(211, 211, 211);
        padding: 10px;

        span {
            display: inline-block;
            color: rgb(102, 102, 102);
            font-size: 14px;
        }
    }
}

.tab {
    display: flex;
    justify-content: space-around;
    background-color: rgb(250, 250, 250);
    padding: 10px 0;

    div {
        font-size: 14px;

    }

    .price {
        display: flex;

        // flex-direction: column;
        .icon {
            display: flex;
            flex-direction: column;

            .van-icon-arrow-down {
                padding-bottom: 4px;
            }

        }
    }
}

.goodsList {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    div {
        img {
            width: 100%;
            height: 190px;
            border-radius: 10px;
        }

        p {
            img {
                width: 17px;
                height: 17px;
                vertical-align: middle;
                padding-top: 2px;
                margin-right: 3px;
            }

            span {
                font-size: 14px;
            }
        }

        h3 {
            color: red;
            margin: 6px 0;

            span {
                font-size: 10px;
                color: rgb(164, 164, 164);
            }
        }

        .bottomTips {

            background-color: rgb(255, 221, 221);
            border-radius: 10px;
            height: 25px;

            .title {
                overflow: hidden;
                border-radius: 10px;
                background-color: red;
                color: white;
                font-size: 10px;
                padding: 4px;
                display: inline-block;
                // margin-bottom: 10px;

            }

            .content {
                overflow: hidden;
                display: inline-block;
                font-size: 10px;
                margin: 4px;
                color: red;
            }



        }

    }

    .goodsItem {
        width: 45%;

        margin-bottom: 30px;
        // background-color: rgb(190, 179, 165);
    }
}
</style>